<template>
  <div
    class="suiji"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="biaoti">双随机各区县完成对比</div>
    <div class="zu">
      <div class="item">
        <div id="langfang" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">市辖区</div>
          <div class="text">{{sujidata.langfang[0] == -1?0:sujidata.langfang[0]}} 共计</div>
          <div class="text">{{sujidata.langfang[1] }} 已完成</div>
        </div>
      </div>
      <div class="item">
        <div id="anci" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">安次区</div>
          <div class="text">{{sujidata.anci[0] == -1?0:sujidata.anci[0]}} 共计</div>
          <div class="text">{{sujidata.anci[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="guangyang" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">广阳区</div>
          <div class="text">{{sujidata.guangyang[0] == -1?0:sujidata.guangyang[0]}} 共计</div>
          <div class="text">{{sujidata.guangyang[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="guan" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">固安县</div>
          <div class="text">{{sujidata.guan[0] == -1?0:sujidata.guan[0]}} 共计</div>
          <div class="text">{{sujidata.guan[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="yongqing" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">永清县</div>
          <div class="text">{{sujidata.yongqing[0] == -1?0:sujidata.yongqing[0]}} 共计</div>
          <div class="text">{{sujidata.yongqing[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="xianghe" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">香河县</div>
          <div class="text">{{sujidata.xianghe[0] == -1?0:sujidata.xianghe[0]}} 共计</div>
          <div class="text">{{sujidata.xianghe[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="wenan" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">文安县</div>
          <div class="text">{{sujidata.wenan[0] == -1?0:sujidata.wenan[0]}} 共计</div>
          <div class="text">{{sujidata.wenan[1] }} 已完成</div>
        </div>
      </div>
      <div class="item">
        <div id="dacheng" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">大城县</div>
          <div class="text">{{sujidata.dacheng[0] == -1?0:sujidata.dacheng[0]}} 共计</div>
          <div class="text">{{sujidata.dacheng[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="dachang" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">大厂回族自治县</div>
          <div class="text">{{sujidata.dachang[0] == -1?0:sujidata.dachang[0]}} 共计</div>
          <div class="text">{{sujidata.dachang[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="bazhou" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">霸州市</div>
          <div class="text">{{sujidata.bazhou[0] == -1?0:sujidata.bazhou[0]}} 共计</div>
          <div class="text">{{sujidata.bazhou[1] }} 已完成</div>
        </div>
      </div>

      <div class="item">
        <div id="sanhe" style="height:100%;width:100%;">加载中</div>
        <div class="right">
          <div class="title">三河市</div>
          <div class="text">{{sujidata.sanhe[0] == -1?0:sujidata.sanhe[0]}} 共计</div>
          <div class="text">{{sujidata.sanhe[1] }} 已完成</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getSuiJi, getSuiJi2 } from "../../api/fengzhuanye";

export default {
  name: "SuiJi",
  data() {
    return {
      loading: true,
      activeItem: { val: "01", name: "公共卫生" },
      sujidata: {
        langfang: [0, 0],
        anci: [0, 0],
        guangyang: [110, 0],
        guan: [0, 0],
        yongqing: [0, 0],
        xianghe: [0, 0],
        dacheng: [0, 0],
        wenan: [0, 0],
        dachang: [0, 0],
        bazhou: [0, 0],
        sanhe: [0, 0]
      }
    };
  },
  methods: {
    async getData() {
      this.loading = true;
      // try {
      var json = (
        await getSuiJi({
          year: this.$store.state.YEAR,
          specialty: this.activeItem.val
        })
      ).data.data;
      var json2 = (
        await getSuiJi2({
          year: this.$store.state.YEAR,
          specialty: this.activeItem.val
        })
      ).data.data;
      // } catch (error) {
      //   var json = [
      //     {
      //       total: 1,
      //       code: "131001",
      //       name: "市辖区"
      //     },
      //     {
      //       total: 118,
      //       code: "131002",
      //       name: "安次区"
      //     },
      //     {
      //       total: 336,
      //       code: "131003",
      //       name: "广阳区"
      //     },
      //     {
      //       total: 187,
      //       code: "131022",
      //       name: "固安县"
      //     },
      //     {
      //       total: 112,
      //       code: "131023",
      //       name: "永清县"
      //     },
      //     {
      //       total: 112,
      //       code: "131024",
      //       name: "香河县"
      //     },
      //     {
      //       total: 64,
      //       code: "131025",
      //       name: "大城县"
      //     },
      //     {
      //       total: 72,
      //       code: "131026",
      //       name: "文安县"
      //     },
      //     {
      //       total: 65,
      //       code: "131028",
      //       name: "大厂回族自治县"
      //     },
      //     {
      //       total: 241,
      //       code: "131081",
      //       name: "霸州市"
      //     },
      //     {
      //       total: 268,
      //       code: "131082",
      //       name: "三河市"
      //     }
      //   ];

      //   var json2 = [
      //     {
      //       total: 1,
      //       code: "131001",
      //       name: "市辖区"
      //     },
      //     {
      //       total: 100,
      //       code: "131002",
      //       name: "安次区"
      //     },
      //     {
      //       total: 333,
      //       code: "131003",
      //       name: "广阳区"
      //     },
      //     {
      //       total: 178,
      //       code: "131022",
      //       name: "固安县"
      //     },
      //     {
      //       total: 112,
      //       code: "131023",
      //       name: "永清县"
      //     },
      //     {
      //       total: 112,
      //       code: "131024",
      //       name: "香河县"
      //     },
      //     {
      //       total: 57,
      //       code: "131025",
      //       name: "大城县"
      //     },
      //     {
      //       total: 67,
      //       code: "131026",
      //       name: "文安县"
      //     },
      //     {
      //       total: 64,
      //       code: "131028",
      //       name: "大厂回族自治县"
      //     },
      //     {
      //       total: 234,
      //       code: "131081",
      //       name: "霸州市"
      //     },
      //     {
      //       total: 262,
      //       code: "131082",
      //       name: "三河市"
      //     }
      //   ];
      // }
      this.loading = false;

      let model = {
        langfang: [-1, 0],
        anci: [-1, 0],
        guangyang: [-1, 0],
        guan: [-1, 0],
        yongqing: [-1, 0],
        xianghe: [-1, 0],
        dacheng: [-1, 0],
        wenan: [-1, 0],
        dachang: [-1, 0],
        bazhou: [-1, 0],
        sanhe: [-1, 0]
      };

      json.forEach(val => {
        switch (val.name) {
          case "市辖区":
            model.langfang[0] = val.total;
            break;
          case "安次区":
            model.anci[0] = val.total;
            break;
          case "广阳区":
            model.guangyang[0] = val.total;
            break;
          case "固安县":
            model.guan[0] = val.total;
            break;
          case "永清县":
            model.yongqing[0] = val.total;
            break;
          case "香河县":
            model.xianghe[0] = val.total;
            break;
          case "大城县":
            model.dacheng[0] = val.total;
            break;
          case "文安县":
            model.wenan[0] = val.total;
            break;
          case "大厂回族自治县":
            model.dachang[0] = val.total;
            break;
          case "霸州市":
            model.bazhou[0] = val.total;
            break;
          case "三河市":
            model.sanhe[0] = val.total;
            break;
          default:
            break;
        }
      });

      json2.forEach(val => {
        switch (val.name) {
          case "市辖区":
            model.langfang[1] = val.total;
            break;
          case "安次区":
            model.anci[1] = val.total;
            break;
          case "广阳区":
            model.guangyang[1] = val.total;
            break;
          case "固安县":
            model.guan[1] = val.total;
            break;
          case "永清县":
            model.yongqing[1] = val.total;
            break;
          case "香河县":
            model.xianghe[1] = val.total;
            break;
          case "大城县":
            model.dacheng[1] = val.total;
            break;
          case "文安县":
            model.wenan[1] = val.total;
            break;
          case "大厂回族自治县":
            model.dachang[1] = val.total;
            break;
          case "霸州市":
            model.bazhou[1] = val.total;
            break;
          case "三河市":
            model.sanhe[1] = val.total;
            break;
          default:
            break;
        }
      });

      this.sujidata = model;
      this.init();
    },
    init() {
      let obj = this.sujidata;
      this.suiji = this.drawCircular2("langfang", obj.langfang);
      this.suiji1 = this.drawCircular2("anci", obj.anci);
      this.suiji2 = this.drawCircular2("guangyang", obj.guangyang);
      this.suiji3 = this.drawCircular2("guan", obj.guan);
      this.suiji4 = this.drawCircular2("yongqing", obj.yongqing);
      this.suiji5 = this.drawCircular2("xianghe", obj.xianghe);

      this.suiji6 = this.drawCircular2("dacheng", obj.dacheng);
      this.suiji7 = this.drawCircular2("wenan", obj.wenan);
      this.suiji8 = this.drawCircular2("dachang", obj.dachang);
      this.suiji9 = this.drawCircular2("bazhou", obj.bazhou);
      this.suiji10 = this.drawCircular2("sanhe", obj.sanhe);
    },
    drawCircular2(id, value) {
      let zong = value[0];
      let zhan = value[1];

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      let option = {
        title: {
          show: true,
          text: Math.floor((zhan / zong) * 100) + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: "12",
            color: "#07ccff",
            fontWeight: "normal"
          }
        },
        color: ["#5eba3b", "#36335e"],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        series: {
          name: "",
          type: "pie",
          radius: ["50%", "80%"],
          hoverAnimation: false,
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: zhan,
              name: "已完成"
            },
            {
              value: zong - zhan,
              name: "未完成"
            }
          ]
        }
      };
      myChart.setOption(option);
      return myChart;
    },
    suijishu(num) {
      if (num > 1) {
        let arr = [];
        for (let i = 0; i < num; i++) {
          arr.push((Math.random() * 100).toFixed(0));
        }
        return arr;
      } else {
        return (Math.random() * 100).toFixed(0);
      }
    },
    windowChange() {
      this.suiji.resize();
      this.suiji1.resize();
      this.suiji2.resize();
      this.suiji3.resize();
      this.suiji4.resize();
      this.suiji5.resize();
      this.suiji6.resize();
      this.suiji7.resize();
      this.suiji8.resize();
      this.suiji9.resize();
      this.suiji10.resize();
    }
  },
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.windowChange();
    });
    Bus.$on("topNavChange", e => {
      this.activeItem = e;
      this.getData();
    });
  }
};
</script>

<style scoped lang="less">
.suiji {
  border: 0.0625rem solid #2c4daa;

  .biaoti {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  .zu {
    height: calc(100% - 3.125rem);
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 50%;
      height: 16%;
      display: flex;
      justify-content: space-around;

      & > div:nth-of-type(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(120deg, #155799, #159957);
        background-size: 200% 100%;
        background-clip: text;
        color: transparent;
        animation: bgp 3s infinite linear;
      }

      .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;

        & > div:nth-of-type(2) {
          &:before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #10d3ef;
            margin-right: 0.4rem;
          }
        }

        & > div:nth-of-type(3) {
          &:before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #42b983;
            margin-right: 0.4rem;
          }
        }

        .title {
          color: #07ccff;
          font-size: 0.75rem;
          line-height: 1.6rem;
        }

        .text {
          font-size: 0.625rem;
          color: #fff;
          line-height: 1rem;
        }
      }
    }
  }
}
</style>